<template>
	<div>
		<div class="table">
			<el-table
				:border="false"
				:data="data"
				:header-cell-style="{ backgroundColor: '#00B4D422', color: '#000' }"
				:row-style="tableRowClassName">
				<el-table-column prop="publicName" label="设备名称"> </el-table-column>
				<el-table-column prop="buildId" label="地点" />
				<el-table-column prop="publicCount" label="设备数量" />

				<el-table-column prop="createTime" label="添加设备时间" />

				<el-table-column label="操作">
					<template #default="{ row }">
						<el-button link class="btn-update" @click="handleModClick(row)">修改设备</el-button>
						<el-button link class="btn-del" @click="handleDelClick(row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>

		<!-- 分页 -->
		<el-row class="pagination">
			<el-pagination
				v-model:current-page="currentPage"
				v-model:page-size="pageSize"
				:page-sizes="pageSizes"
				small="small"
				:background="true"
				layout="total, sizes, prev, pager, next"
				:total="total"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange" />
		</el-row>

		<!-- 删除对话框 -->
		<DeleteDialog v-model:show="showDelDialog">
			<template #containt>
				<div class="containt">{{ delTargetPublic.publicName }} 设备</div>
			</template>
			<template #btn>
				<el-button link type="primary" @click="handleDelPublic">确认删除</el-button>
				<el-button link type="danger" @click="showDelDialog = false">取消</el-button>
			</template>
		</DeleteDialog>

		<!-- 修改设备 -->
		<el-drawer v-model="drawerRight" title="修改设备" direction="rtl" :show-close="false">
			<el-form :label-width="100" label-position="top" :model="modtargetPublic" style="width: 300px">
				<el-form-item label="设备编号">
					<el-input v-model="modtargetPublic.publicId" readonly />
				</el-form-item>
				<el-form-item label="设备名称">
					<el-input v-model="modtargetPublic.publicName" />
				</el-form-item>
				<el-form-item label="楼栋" v-if="userInfo.limits !=1">
					<el-select v-model="modtargetPublic.buildId">
						<el-option v-for="i in 20" :key="i" :label="`${i} 栋`" :value="i" />
					</el-select>
				</el-form-item>
				<el-form-item label="设备数量">
					<el-input-number v-model="modtargetPublic.publicCount" :min="1" :max="50" />
				</el-form-item>
			</el-form>
			<template #footer>
				<el-space :size="30">
					<el-button type="primary" plain @click="handleUpdatePublic">确认修改</el-button>
					<el-button type="danger" plain @click="drawerRight = false">取消</el-button>
				</el-space>
			</template>
		</el-drawer>
	</div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { getAllPublicEquiment, delOneEquiment, updateEquiment } from '@/utils/axios/domiRequests'
import { getPubOneBuild } from '@/utils/axios/getTotal'
import { useUserStore } from '@/stores/userStore'

const { userInfo } = useUserStore()
const currentPage = ref(1)
const pageSize = ref(5)
const pageSizes = reactive([5,10, 20, 30])


defineProps(['data','total'])

const $emit=defineEmits(['page-change'])
// 删除的目标设施
const delTargetPublic = ref({})
// 修改的目标公共设施
const modtargetPublic = ref({})
// 显示删除对话框
const showDelDialog = ref(false)


// 显示修改抽屉
const drawerRight = ref(false)



// 页面大小改变
const handleSizeChange =async (val) => {
	let { data } = await getAllPublicEquiment({ currentPage: currentPage.value ,pageSize:val})
	$emit("page-change",{data})
}
const handleCurrentChange = async(val) => {
	let { data } = await getAllPublicEquiment({ currentPage:val,pageSize:pageSize.value })
	$emit("page-change",{data})
}

// 添加表格样式
const tableRowClassName = ({ row, rowIndex }) => {
	if (rowIndex % 2 === 1) {
		return { backgroundColor: '#00B4D411' }
	}
	return ''
}

// 修改设备信息点击事件
const handleModClick = (val) => {
	drawerRight.value = true
	modtargetPublic.value = val
}
// 删除设备点击事件
const handleDelClick = (val) => {
	showDelDialog.value = true
	delTargetPublic.value = val
}
// 处理更新设备
const handleUpdatePublic = async () => {
	await updateEquiment(modtargetPublic.value)
	await init()
	drawerRight.value = false
}


// 处理删除设备请求
const handleDelPublic = async () => {
	await delOneEquiment({publicId:Number.parseInt(delTargetPublic.value.publicId)})
	 init().then(()=>showDelDialog.value=false)
  
}

async function init() {
	let { data } = await getAllPublicEquiment({ currentPage: currentPage.value ,pageSize:pageSize.value})
	let res = await getPubOneBuild({ buildId: Number.parseInt(userInfo.buildId) })
	$emit("page-change",{data,tota:res.data})
}
onMounted(async () => {
	await init()
})
</script>

<style scoped lang="scss">
$color-del: #eb5d5dce;
$color-update: #3de1cece;
.btn {
	background: rgb(0, 202, 237);
	color: #ffff;
	&-del {
		background-color: $color-del;
	}
	&-update {
		background-color: $color-update;
	}
}

.header {
	margin-bottom: 20px;
}

.pagination {
	position: absolute;
	bottom: 10px;
	right: 0;
	margin-top: 20px;
	justify-content: end;
}

.wrap {
	overflow-y: scroll;
}
</style>
